<template>
  <div>
    <div
      :class="['left-item',{'left-item-active':selectIndex===index?true:false}]"
      @click="onClick(item)"
    >
      <div class="left-title">{{title}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: Object,
    selectIndex: Number,
    index: Number
  },
  data() {
    return {
      title: this.item.name
    };
  },
  methods: {
    onClick(item) {
      let obj={
        index:this.index,
        item:item
      }
      //获取改变状态后的当前下标

      this.$store.dispatch("getchange", obj);
    }
  }
};
</script>
<style>
.left-item {
  width: 100%;
  height: 50px;
  /* border: 1px solid black; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.left-item-active {
  border-left: 2px solid red;
}
.left-title {
  height: 0.5rem;
}
</style>